<template>
  <div class="newsysDictContainer">
    <div
      class="dialog animated"
      :class="open? 'fadeIn':'fadeOut'"
      v-show="show"
      :style="{visibility: (visible?'visible':'hidden')}"
    >
      <div class="panel animated" :class="open? 'zoomIn':''">
        <div class="title">
          {{title}}
          <div class="close" @click="cancel()"></div>
        </div>
        <div>
          <el-form label-width="140px">
            <el-form-item label="类型" :rules="[
      { required: true, message: ''}]">
              <el-input
                ref="remark"
                :disabled="!isAdd"
                style="width:50%"
                clearable
                v-model="sysDictData.remark"
                placeholder="请输入数据字典类型"
              ></el-input>
            </el-form-item>
            <el-form-item label="数据键" :rules="[
      { required: true, message: ''}]">
              <el-input
                ref="dicKey"
                :disabled="!isAdd"
                style="width:50%"
                clearable
                v-model="sysDictData.dicKey"
                placeholder="请输入数据字典的键"
              ></el-input>
            </el-form-item>
            <el-form-item label="版本号">
              <el-input
                ref="version"
                :disabled="!isAdd"
                style="width:50%"
                clearable
                v-model="sysDictData.version"
                placeholder="请输入数据字典版本号，默认为1"
              ></el-input>
            </el-form-item>
          </el-form>
          <div class="line_from"></div>
          <el-form
            :inline="true"
            style="margin:0rem 0.2rem 0 0.3rem;"
            v-for="item,index in sysDictData.dicFieldList"
            :key="item.dicValue"
          >
            <el-form-item label="名称">
              <el-input v-model="item.name" :ref="item.name"></el-input>
            </el-form-item>
            <el-form-item label="值">
              <el-input v-model="item.dicValue" :ref="item.dicValue"></el-input>
            </el-form-item>
            <el-form-item label="排序号">
              <el-input v-model="item.orderBy" :ref="item.orderBy"></el-input>
            </el-form-item>
            <span class="add_btn" @click="addDict()"></span>
            <span class="reduce_btn" @click="deleteDict(item)"></span>
          </el-form>
        </div>
        <div class="btn_div">
          <div class="btn_sure" @click="sure()">确 认</div>
          <div class="btn_cancel" @click="cancel()">取 消</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
var vm;
export default {
  data: function() {
    return {
      show: false,
      open: false,
      visible: false,
      isAdd: false,
      title: "",
      sysDictData: {}
    };
  },
  methods: {
    init: function(data) {
      vm.show = true;
      setTimeout(function() {
        vm.open = true;
        vm.visible = true;
      }, 11);
      if (data.id == undefined) {
        vm.title = "新增数据字典";
        vm.isAdd = true;
        vm.sysDictData = {
          dicFieldList: [
            {
              name: "",
              dicValue: "",
              orderBy: ""
            }
          ],
          remark: "",
          version: "",
          dicKey: ""
        };
      } else {
        vm.title = "扩展数据字典";
        vm.isAdd = false;
        vm.sysDictData = {
          dicFieldList: [
            {
              name: "",
              dicValue: "",
              orderBy: ""
            }
          ],
          remark: data.remark,
          version: data.version,
          dicKey: data.dicKey
        };
      }
    },
    addDict: function() {
      vm.sysDictData.dicFieldList.push({
        name: "",
        dicValue: "",
        orderBy: ""
      });
    },
    deleteDict: function(item) {
      if (vm.sysDictData.dicFieldList.length === 1) {
        vm.sysDictData.dicFieldList = [];
        vm.sysDictData.dicFieldList.push({
          name: "",
          dicValue: "",
          orderBy: ""
        });
      } else {
        var index = vm.sysDictData.dicFieldList.indexOf(item);
        if (index !== -1) {
          vm.sysDictData.dicFieldList.splice(index, 1);
        }
      }
    },
    sure: function() {
      var rules = [];
      let remark = this.$refs.remark;
      let dicKey = this.$refs.dicKey;
      let version = this.$refs.version;
      vm.sysDictData.version =
        vm.sysDictData.version == "" ? 1 : vm.sysDictData.version;
      rules.push({
        judge: vm.sysDictData.remark,
        focus: remark,
        tips: "请输入类型"
      });
      rules.push({
        judge: vm.sysDictData.dicKey,
        focus: dicKey,
        tips: "请输入数据键"
      });
      rules.push({
        judge: vm.sysDictData.version,
        focus: version,
        tips: "请输入版本号"
      });
      vm.sysDictData.dicFieldList.forEach(function(item, index) {
        rules = rules.concat([
          {
            judge: item.name,
            focus: vm.$refs[item.name][0],
            tips: "请输入正确的名称"
          },
          {
            judge: item.dicValue,
            focus: vm.$refs[item.dicValue][0],
            tips: "请输入值"
          },
          {
            judge: item.orderBy,
            focus: vm.$refs[item.orderBy][0],
            tips: "请输入排序号"
          }
        ]);
      });
      if (!tool.validate(rules)) {
        return;
      }
      if (vm.isAdd) {
        api.sysdictAdd(vm.sysDictData).then(function(data) {
          if (data.resultCode == 2000) {
            vm.$message({
              message: "添加成功",
              type: "success"
            });
            vm.$emit("callback", "添加成功");
            vm.cancel();
          } else {
            vm.$message.error(data.message);
          }
        });
      } else {
        api.extend(vm.sysDictData).then(function(data) {
          if (data.resultCode == 2000) {
            vm.$message({
              message: "扩展成功",
              type: "success"
            });
            vm.$emit("callback", "添加成功");
            vm.cancel();
          } else {
            vm.$message.error(data.message);
          }
        });
      }
    },
    cancel: function() {
      //隐藏弹窗
      vm.open = false;
      setTimeout(function() {
        vm.show = false;
        vm.visible = false;
      }, 500);
    }
  },
  created: function() {
    vm = this;
  }
};
</script>
<style lang="scss">
.newsysDictContainer {
  .line_from {
    height: 1px;
    margin: 0.24rem 0.18rem 0.18rem 0.18rem;
    background-color: #f3f6fc;
  }
  .el-form--inline .el-form-item {
    vertical-align: inherit;
  }
}
</style>
<style scoped src="@/style/clue_manage/clue_add.css"></style>
<style scoped src="@/style/module/dialog.css"></style>
<style scoped>
.panel {
  width: 10rem;
  padding-bottom: 0.2rem;
}
</style>

